<template>
  <el-row :gutter="0">
    <!-- 图 -->
    <el-col :span="8">
      <div>
        <template v-for="(shadow, i) in shadowGroup" :key="i">
          <div class="demo-shadow" :style="{ boxShadow: `var(--el-box-shadow-${shadow.type})` }"></div>
          <span class="demo-shadow-text"></span>
        </template>
      </div>
    </el-col>
    <!-- 选择、表 -->
    <el-col :span="16">
      选择分析对象：
      <el-radio-group v-model="radio">
        <el-radio :label="1">参考相量</el-radio>
        <el-radio :label="2">旋转相量</el-radio>
      </el-radio-group>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        >
        <el-table-column type="selection" width="55" />
        <el-table-column property="passageway" label="通道" width="150" />
        <el-table-column property="entity" label="实部" width="150" />
        <el-table-column property="virital" label="虚部" width="150" />
        <el-table-column property="phasor" label="相量" width="150" />
        </el-table>

    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, h } from "vue";

const radio = ref(1);

const shadowGroup = ref([
  {
    name: "Basic Shadow",
    type: "base",
  },
]);

const tableData = [
    {
        passageway: '通道1',
        entity: "实1",
        virital: "虚1",
        phasor: "相量",
    },
    {
        passageway: '通道1',
        entity: "实1",
        virital: "虚1",
        phasor: "相量",
    },
    {
        passageway: '通道1',
        entity: "实1",
        virital: "虚1",
        phasor: "相量",
    },
];
</script>

<style>
.demo-shadow {
  height: 200px;
  width: 100%;
}
.demo-shadow-text {
  line-height: 50px;
  color: var(--el-text-color-regular);
  font-size: 14px;
}
</style>
